<template>
  <div class="infor">
    <div class="infor_title">店铺信息</div>
    <div class="infor_main">
        <div class="infor_main_card">
             <el-avatar shape="square" :size="200" fit="fit" :src="shopList[0]?.logo[0].url" />
             <div class="name">
                <span>店铺名：</span>
                <span>{{shopList[0]?.name}}</span>
             </div>
             <p class="address">
                <span>店铺地址：</span>
                <span>{{shopList[0]?.address}}</span>
             </p>
             <button @click="editShopInfor">修改</button>
        </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { shopInforList } from '@/api/shop/shopinfor'
const shopList = ref([])
const { proxy } = getCurrentInstance();
const router = useRouter()

onMounted(() => {
    getShopInforList()
})
// 获取店铺信息
const getShopInforList = async () => {
    const res = await shopInforList()
    const { data,code } = res
    if(code === 200) {
        shopList.value = data
    }else {
        proxy.$modal.msgError("获取店铺信息失败");
    }
}
// 修改店铺信息
const editShopInfor = () => {
    router.push({
        path: '/shopinfor',
        query: {
            name:'edit'
        }
    })
}
</script>

<style lang="scss" scoped>
.infor {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    .infor_title {
        font-size: 20px;
        font-weight: 600;
        color:#000;
    }
    .infor_main {
        margin-top: 20px;
        width: 100%;
        height: 100%;
        display: flex;
        .infor_main_card {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 30%;
            height: 654px;
            background-image: linear-gradient(144deg,#8608b4, #492fed 60%,#bd6fda);
            border: none;
            border-radius: 10px;
            padding-top: 10px;
            position: relative;
            margin: auto;
            font-family: inherit;
            padding: 20px;
            .name {
                font-weight: 600;
                color: white;
                text-align: center;
                display: block;
                padding-top: 10px;
                font-size: 1.3em;
            }
            .address {
                font-weight: 400;
                color: white;
                display: block;
                text-align: center;
                padding-top: 5px;
                font-size: 1em;
            }
            button {
                padding: 8px 25px;
                display: block;
                border-radius: 8px;
                border: none;
                margin-top: 100px;
                background: #e8e8e8;
                color: #111111;
                font-weight: 600;
            }

           button:hover {
                background: #212121;
                color: #ffffff;
            }
        }

    }
}
</style>